<template>
  <div>
    <a-form-item label='后端服务绑定' v-bind="formItemLayout">
      <a-select v-model="configData.delegateClass" @change="dataChange">
        <a-select-option v-for="(value, key) in serviceTaskList" :value="key" :key="key">{{ value }}</a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item label='节点执行成功流出连接线ID' v-bind="formItemLayout2">
      <a-input v-model="configData.performSuccessOutgoingId" @change="dataChange"/>
    </a-form-item>
    <a-form-item label='节点执行失败流出连接线ID' v-bind="formItemLayout2">
      <a-input v-model="configData.performFailOutgoingId" @change="dataChange"/>
    </a-form-item>
  </div>
</template>
<script>

const formItemLayout = {
  labelCol: {span: 8},
  wrapperCol: {span: 14}
}
const formItemLayout2 = {
  labelCol: {span: 14},
  wrapperCol: {span: 8}
}
export default {
  name: 'ServiceNodeConfig',
  props: {
    configData: {
      type: Object,
      default: () => ({
        // 对应后端 CustomServiceNode
        delegateClass: undefined,
        performSuccessOutgoingId: undefined,
        performFailOutgoingId: undefined
      })
    }
  },
  model: {
    prop: 'configData',
    event: 'input'
  },
  data () {
    return {
      formItemLayout,
      formItemLayout2,
      serviceTaskList: {}
    }
  },
  methods: {
    dataChange () {
      this.$emit('input', this.configData)
    },
    loadServiceTaskList () {
      this.$get('/process/design/serviceTaskList').then((res) => {
        this.serviceTaskList = res.data
      })
    }
  },
  mounted () {
    this.loadServiceTaskList()
  }
}
</script>
